
<template>
    <el-tabs style="--el-color-primary: var( --el-title-color)" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="题目描述" name="1"><titlepro/></el-tab-pane>
      <el-tab-pane label="评论" name="2">Config</el-tab-pane>
      <el-tab-pane label="题解" name="3">Role</el-tab-pane>
      <template v-for="(item,index) in store.totalJudgeResponseArray " :key="index">
        <el-tab-pane  v-if="len !=1 && len != index+1 "  label="提交记录" :name="`${index+4}`"><ResultInfoVue :result="item"/></el-tab-pane>
        <el-tab-pane  v-if="len == index+1"  label="判题结果" :name="`${index+4}`"><ResultInfoVue :result="item"/></el-tab-pane>
      </template>
      <!-- <el-tab-pane label="判题结果" :name="len+3"><ResultInfoVue/></el-tab-pane> -->
    </el-tabs>
  </template>
  <script lang="ts" setup>
  import { ref,onMounted, watch} from 'vue'
  import titlepro from './title.vue';
  import type { TabsPaneContext } from 'element-plus'
  import emitter from '@/util/emit';
  import {mainStore} from "@/store/index"
  import ResultInfoVue from '../result/ResultInfo.vue';
  
  const activeName= ref('1')

  const store=mainStore();
  const len=ref(1)
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }

  watch(store.totalJudgeResponseArray,(v)=>{
        len.value=store.totalJudgeResponseArray.length;
          activeName.value=`${store.totalJudgeResponseArray.length+3}`;
      
       
      })


  

  </script>
  <style>
  .demo-tabs > .el-tabs__content {
   
    font-size: 16px;
    
  }
  </style>
  